<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-control" content="no-cache">
  <meta http-equiv="Cache" content="no-cache">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" type="image/x-icon" href="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico">
  <title>确认打开微信小程序</title>
</head>

<body>
<div id="jumpToMicroAPP">
  <!-- js生成按钮 -->
</div>
</body>

<script>
  // 用js实现在加载完成一个页面后自动执行一个方法
  window.onload = async function () {
    //微信小程序 Url Scheme 可以到mp.weixin.qq.com 小程序后台右上角，工具下生成，另外也可以通过接口生成
    let scheme = "weixin://dl/business/?t=t5Qw259Fi1t" // 需要打开的app scheme 地址

    // 尝试打开 scheme
    window.location.href = scheme;

    // 2秒后显示按钮
    let downloadTimer = setTimeout(function () {
      let html = `<button class="btn" id="openBtn" onclick="openWithApp()">点击打开微信小程序</button>`
      document.getElementById('jumpToMicroAPP').innerHTML = html;
    }, 2000);
  }
</script>

<script>
  // 参考链接：https://blog.csdn.net/weixin_42895400/article/details/87799262
  function openWithApp(id) {
    //微信小程序 Url Scheme 可以到mp.weixin.qq.com 小程序后台右上角，工具下生成，另外也可以通过接口生成
    let scheme = "weixin://dl/business/?t=t5Qw259Fi1t" // 需要打开的app scheme 地址

    // 尝试打开 scheme
    window.location.href = scheme;
  }
</script>
<style type="text/css">
  .btn {
    display: inline-block;
    position: fixed;
    padding: 15px 32px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #27ae60;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border: none;

    color: white;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
  }
</style>

</html>
